<template>
  <div>
    <el-input
      class="date"
      prefix-icon="el-icon-date"
      placeholder="请输入日期"
      v-model="obj.date"
      clearable
    ></el-input>
      <el-input
        class="username"
        prefix-icon="el-icon-s-custom"
        placeholder="请输入姓名"
        v-model="obj.name"
        clearable
      ></el-input>
        <el-input
          class="address"
          prefix-icon="el-icon-location"
          placeholder="请输入工作地点"
          v-model="obj.address"
          clearable
        ></el-input>
        <!-- <el-button type="primary" @click="add_name_async(obj)">增加</el-button> -->
        <el-button type="primary" @click="add_name(obj)">增加</el-button>
        <div class="el-container">
          <el-table
            :data="tableData"
            current-row-key="id"
            height="500"
            border
          >
            <el-table-column
              prop="date"
              label="日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            ></el-table-column>
          </el-table>
        </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  data () {
    return {
      obj: {
        id: 6,
        date: '',
        name: '',
        address: ''
      }
    }
  },
  methods: {
    /* 在组件的methods中接收mutations中的方法并调用，需要通过commit来接收方法，并
    传入参数 */
    /* addName () {
      this.$store.commit('add_name', {
        id: this.id++,
        date: this.date,
        name: this.name,
        address: this.address
      })
    } */
    // 通过ES6展开运算符接收mutations 直接使用add_name(obj)方法
    ...mapMutations(['add_name'], ['add_name_async']),

    /*  异步代码 --》通过dispatch分发actions
    $store上有一个dispatch方法用来提交actions，actions提交commit触发mutations */
    /* add_nameasync () {
      this.$store.dispatch('add_name_async', this.obj)
    } */
    ...mapActions(['add_name_async'])
  },
  // 组件访问store中的状态(数据)，通过计算属性来接收store中的状态(数据)
  // 如果组件需要访问store中的多个状态，一个一个定义计算属性接收泰国冗余和麻烦，
  // mapState辅助函数帮助我们生成计算属性
  computed: {
    // 通过计算属性接收store中的状态
    /* getData () {
      return this.$$store.state.tableData
    }, */
    // 通过辅助函数接收store中的状态
    ...mapState(['tableData', 'msg']
      // 第一种接收store中的状态
      // tableData: 'tableData', // 此处的tableData相当于state.tablerData,更为简洁
      // 第二种接收store中的状态
      // tableData: state => state.tableData
      // msg: 'msg'
      // ...mapGetters(['change'])
    )
  }

}
</script>

<style lang="scss" scoped>
* {
  list-style: none;
}
.el-container {
  margin: 30px 20px 0 20px;
  width: 1000px;
}
.date,
.username,
.address {
  width: 400px;
  margin: 10px;
}
</style>
